<template>
    <div class="distpicker-box">
<!--        <el-row :gutter='10'>-->
            <el-col :sm='24' :xs='24' v-if="!onlyProvince">
<!--                <el-row :gutter='10'>-->
                    <el-col :sm='8' :xs='24'>
                      <el-select @change="getCities" v-model="currentProvince">
                        <el-option :value="placeholders.province">{{ placeholders.province }}</el-option>
                        <el-option
                          v-for="(item, key) in provinces"
                          :key='key'
                          :label="item"
                          :value="item"
                        >
                        </el-option>
                      </el-select>
                    </el-col>
                    <el-col :sm='8' :xs='24'>
                        <el-select @change="getAreas" v-model="currentCity">
                            <el-option :value="placeholders.city">{{ placeholders.city }}</el-option>
                            <el-option
                                v-for="(item, key) in cities"
                                :key='key'
                                :label="item"
                                :value="item"
                            >
                            </el-option>
                        </el-select>
                    </el-col>
                    <!-- 区 -->
                    <el-col :sm='8' :xs='24' >
                        <el-select v-model="currentArea">
                            <el-option :value="placeholders.area">{{ placeholders.area }}</el-option>
                            <el-option
                                v-for="(item, key) in areas"
                                :key='key'
                                :label="item"
                                :value="item"
                            >
                            </el-option>
                        </el-select>
                    </el-col>
<!--                </el-row>-->
            </el-col>
<!--        </el-row>-->
    </div>
</template>

<script>
import distpicker from '@/utils/distpicker.js'
const DEFAULT_CODE = 100000
export default {
    name: 'addressPicker',
    props: {
        province: { type: [String, Number], default: '' },
        city: { type: [String, Number], default: '' },
        area: { type: [String, Number], default: '' },
        type: { type: String, default: '' },
        hideArea: { type: Boolean, default: false },
        onlyProvince: { type: Boolean, default: false },
        staticPlaceholder: { type: Boolean, default: false },
        placeholders: {
            type: Object,
            default() {
                return {
                    province: '省',
                    city: '市',
                    area: '区',
                }
            }
        },
        disabled: { type: Boolean, default: false },
    },
    data(){
        return {
            provinces: [],
            cities: [],
            areas: [],
            currentProvince: this.determineType(this.province) || this.placeholders.province,
            currentCity: this.determineType(this.city) || this.placeholders.city,
            currentArea: this.determineType(this.area) || this.placeholders.area,
        }
    },
    watch: {
        currentProvince(value) {
            this.$emit('province', this.setData(value))
            if (this.onlyProvince) this.emit('selected')
        },
        currentCity(value) {
            this.$emit('city', this.setData(value, this.currentProvince))
            if (value != this.placeholders.city && this.hideArea) this.emit('selected')
        },
        currentArea(value) {
            this.$emit('area', this.setData(value, this.currentProvince));
            // if (value != this.placeholders.area)
            this.emit('selected');
        },
        province(value) {
            this.currentProvince = this.province || this.placeholders.province
            this.cities = this.determineValue(this.currentProvince, this.placeholders.province)
        },
        city(value) {
            this.currentCity = this.city || this.placeholders.city;
            this.areas = this.determineValue(this.currentCity, this.placeholders.city, this.currentProvince)
        },
        area(value) {
            this.currentArea = this.area || this.placeholders.area
        },
    },
    created() {
        this.provinces = this.getProvince();
        this.cities = this.province ? this.getProvince(this.getAreaCode(this.determineType(this.province))) : [];
        this.areas = this.city ? this.getProvince(this.getAreaCode(this.determineType(this.city), this.area)) : [];
    },
    mounted() {
    },
    methods: {
        setData(value, check = '') {
            return {
                code: this.getAreaCode(value, check),
                value: value,
            }
        },
        emit(name) {
            let data = {
                province: this.setData(this.currentProvince)
            }
            if (!this.onlyProvince) {
                this.$set(data, 'city', this.setData(this.currentCity))
            }
            if (!this.onlyProvince || this.hideArea) {
                this.$set(data, 'area', this.setData(this.currentArea))
            }
            this.$emit(name, data)
        },
        getCities() {
            this.currentCity = this.placeholders.city
            this.currentArea = this.placeholders.area
            this.cities = this.determineValue(this.currentProvince, this.placeholders.province)
            this.cleanList('areas')
            if (this.cities.length === 0) {
                this.emit('selected')
                this.tab = 1
                this.showCityTab = false
            }
        },
        getAreas() {
            this.currentArea = this.placeholders.area
            this.areas = this.determineValue(this.currentCity, this.placeholders.city, this.currentProvince)

            if (this.areas.length === 0) {
                this.emit('selected')
                this.tab = 2
                this.showAreaTab = false
            }
        },
        getProvince(code = DEFAULT_CODE) {
            return distpicker[code] || []
        },
        getCodeValue(code) {
            for(let x in distpicker) {
                for(let y in distpicker[x]) {
                    if(code === parseInt(y)) {
                        return distpicker[x][y]
                    }
                }
            }
        },
        determineType(value) {
            if(typeof value === 'number') {
                return this.getCodeValue(value)
            }
            return value
        },
        getAreaCode(name, check = '') {
            for(let x in distpicker) {
                for(let y in distpicker[x]) {
                    if(name === distpicker[x][y]) {
                        if (check.length > 0) {
                            let preCode = this.getAreaCodeByPreCode(check, y.slice(0, 2));
                            if(preCode) {
                                if (y.slice(0, 2) !== preCode.slice(0, 2)) {
                                    continue
                                } else {
                                    return y;
                                }
                            } else {
                                return y;
                            }
                        } else {
                            return y;
                        }
                    }
                }
            }
        },
        getAreaCodeByPreCode(name, preCode) {
            let codes = []
            for(let x in distpicker) {
                for(let y in distpicker[x]) {
                    if(name === distpicker[x][y]) {
                        codes.push(y);
                    }
                }
            }
            if (codes.length > 1) {
                let index;
                codes.forEach((item, i) => {
                    if (item.slice(0, 2) == preCode) {
                        index = i;
                    }
                })
                return codes[index]
            } else {
                return codes[0];
            }
        },
        determineValue(currentValue, placeholderValue, check = '') {
            if(currentValue === placeholderValue) {
                return [];
            } else {
                return this.getProvince(this.getAreaCode(currentValue, check));
            }
        },
        cleanList(name) {
            this[name] = [];
        },
    }
}
</script>

<style lang="scss" scoped>
.distpicker-box{
    font-size: 0;
}
</style>
<style lang="scss" scoped>
@import "@/styles/variables.scss";
.distpicker-box {
    border: none!important;
    .el-select {
        .el-input__inner {
            //border: solid 1px $inputBorderColor!important;
            border-radius: 0;
            box-sizing: border-box;
            height: 42px;
            line-height: 42px;
        }
    }
}
.el-select-dropdown{
    border: none;
    padding: 0;
}
.el-select-dropdown__item{
    cursor: pointer;
}
.el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
    background-color: transparent;
}
.el-select-dropdown__item.selected{
    //color: $mainColor;
}
.el-popper[x-placement^=bottom] .popper__arrow{
    display: none;
}
.search-left .el-input .el-input__inner{
    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}
.el-popper[x-placement^=top] .popper__arrow::after{
    display: none;
}
.el-popper[x-placement^=top] .popper__arrow{
    display: none;
}
.popper__arrow{
    display: none;
}
.el-popper{
    .el-scrollbar {
        border: none;
    }
}
</style>


